<template>
  <div class="historyorder" >
    <!-- 顶部导航栏 -->
    <div class="header">
      <div @click="back" color="#333" ><i class="iconfont icon-fanhui"></i></div>
      <div>历史订单</div>
      <div @click="alertMsg"><i class="iconfont icon-rili"></i></div>
    </div>
    <van-popup v-model="show" position="bottom" :overlay="false">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        cancel-button-text=" "
        @confirm="confirm"
      />
    </van-popup>
    <van-tabs v-model="active" class="tabs">
        <van-tab>
          <div slot="title" >已服务订单</div>
          <div>
            <!-- 已服务订单内容 -->
            <van-list>
            <!-- 没有数据是状态 -->
            <div v-show="list.length == 0" >
              <div class="KC_no_msg">
                <div class="KC_no_msg_img"><img src="../../asset/images/historyorder.png" alt=""></div>
                <div class="KC_no_msg_text">本月还没有已完成订单哦~</div>
              </div>
            </div>
            <!-- 有数据是状态 -->
            <van-panel v-for="item in list" :key="item.id" class="o_panel">
              <div slot="header" class="o_panel_header">
                <div class="left_box">
                  <img class="img" src="../../asset/images/historyorder@3x.png">
                </div>
                <div class="center_box">
                  <p class="p1">{{item.name}}</p>
                  <p class="p2">{{item.date}}</p>
                  <p class="p3">总金额：<span style="color:red;">{{item.num}}</span></p>
                </div>
                <div class="right_box">
                  <p><img :src="item.msg" alt=""></p>
                </div>
              </div>
            </van-panel>
            </van-list>
          </div>
        </van-tab>
        <div class="footer" v-if="active==0">
              <div class="footer_text1">历史统计单</div>
              <div class="footer_text2">                  
                <div>
                  <p class="p1">10笔</p>
                  <p class="p2">今日订单</p>
                </div>
                <div>
                  <p  class="p1">10笔</p>
                  <p  class="p2">日均订单</p>
                </div>
                <div>
                  <p  class="p1">66笔</p>
                  <p  class="p2">历史订单</p>
                </div>                 
              </div>
          </div>
        <van-tab>
          <div slot="title">已卖出订单</div>
          <!-- 数据列表 -->
           <!-- 没有数据是状态 -->
            <div v-show="historylist.length == 0" >
              <div class="KC_no_msg">
                <div class="KC_no_msg_img"><img src="../../asset/images/historyorder.png" alt=""></div>  
                <div class="KC_no_msg_text">本月还没有已完成订单哦~</div>
              </div>
            </div>
            <div class="history" v-for="item in historylist" :key="item.id">
              <div class="history_left">
                <img class="img" src="../../asset/images/historyorder@3x.png">
              </div>
              <div class="history_center">
                <p class="p1">{{item.name}}</p>
                <p class="p2">{{item.date}}</p>
                <p class="p3">总金额：<span style="color:red;">{{item.num}}</span></p>
              </div>
              <div class="history_right">
                <p><img :src="item.msg" alt=""></p>
              </div>
            </div>
        </van-tab>
        <div class="history_footer" v-if="active==1">
              <div style="text-align:right">
                <span style="padding-right:30%">已绑定回收点</span>
                <span><i class="iconfont icon-wenhao" style="color:red"></i></span>
              </div>
              <div class="history_footer_box">
                <div class="history_footer_left">
                  <div>
                    <span>拱墅区站点</span>
                    <span style="color:#f7a427">营业中</span>
                  </div>
                  <div style="color:#5c5c5c">
                    编号:005
                  </div>
                </div>
                <div class="history_footer_right" style="color:#5c5c5c" @click="goToDetails">
                  <span>站点详情</span>
                  <span><i class="iconfont icon-unie61f"></i></span>
                </div>
              </div>
            </div>
    </van-tabs>
  </div>
</template>

<script type="text/babel">
export default {
  name: "historyorder",
  data() {
    return {
      active: 0,
      list: [
        {
          name: "报纸 - 88斤...",
          orderId: "999999",
          date: "2018-7-3 12:12:12",
          num: "￥44.00",
          msg: require("../../asset/images/order_complete.png")
        },
      ],
      historylist: [
        // {
        //   name: "报纸 - 88斤...",
        //   orderId: "999999",
        //   date: "2018-7-3 12:12:12",
        //   num: "￥44.00",
        //   msg: require("../../asset/images/order_complete.png")
        // },
        // {
        //   name: "报纸 - 44斤...",
        //   orderId: "88888888",
        //   date: "2018-7-3 12:12:12",
        //   num: "￥44.00",
        //   msg: require("../../asset/images/order_cancell.png")
        // }
      ],
      show: false,
      currentDate: new Date(),
      minDate: new Date(1900, 1, 1)
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    goToDetails() {
      this.$router.push('detailsrecoverypoints');
    },
    alertMsg() {
      this.show = !this.show;
    },
    confirm() {
      console.log(1);
    }
  }
};
</script>

<style lang="less">
.historyorder {
  .header {
    display: flex;
    justify-content: space-between;
    background: #fff;
    height: 128px;
    align-items: center;
    font-size: 36px;
    padding: 0 30px;
    .iconfont {
      font-size: 36px;
    }
  }
  .tabs {
    .van-tab {
      font-size: 32px;
      color: #999;
      &.van-tab--active {
        color: #f7a427;
      }
    }
    .van-tabs__line {
      background-color: #f7a427;
    }
  }
  .KC_no_msg {
    text-align: center;
    margin: 0 auto;
    padding-top: 200px;
    color: #999999;
    font-size: 28px;
    .KC_no_msg_img {
      text-align: center;
      margin: 0 auto;
      width: 280px;
      height: 280px;
      padding-bottom: 30px;
    }
    .KC_no_msg_text {
      font-size: 28px;
      columns: #999;
    }
  }
  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid #e1e1e1;
    font-size: 28px;
    padding-top: 20px;
    color: #999;
    height: 172px;
    .footer_text2 {
      width: 100%;
      display: flex;
      line-height: 10px;
      justify-content: space-around;
      align-items: center;
      .p1 {
        font-size: 36px;
        text-align: center;
        color: #333;
      }
      .p2 {
        font-size: 24px;
      }
    }
  }
  .o_panel {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 32px;
    .o_panel_header {
      display: flex;
      padding-left: 30px;
      .left_box {
        width: 120px;
        height: 120px;
        padding-top: 30px;
      }
      .center_box {
        display: flex;
        flex-direction: column;
        width: 50%;
        padding-top: 30px;
        p {
          margin: 0;
          line-height: 40px;
          &.p1 {
            font-size: 28px;
            font-weight: bold;
            color: #333;
          }
          &.p2 {
            font-size: 24px;
            color: #999;
          }
          &.p3 {
            font-size: 24px;
          }
        }
      }
      .right_box {
        display: flex;
        justify-content: space-between;
        padding-left: 90px;
        padding-right: 30px;
        p {
          margin: 0;
          font-size: 32px;
          color: red;
          text-align: right;
          width: 124px;
          height: 92px;
        }
      }
    }
  }
  .history {
    display: flex;
    margin: 20px 0px;
    padding: 0 30px;
    font-size: 32px;
    background: #fff;
    .history_left {
      width: 120px;
      padding-top: 30px;
      height: 120px;
    }
    .history_center {
      display: flex;
      flex-direction: column;
      width: 50%;
      padding-top: 30px;
      padding-bottom: 30px;
      p {
        margin: 0;
        line-height: 40px;
        &.p1 {
          font-size: 28px;
          font-weight: bold;
          color: #333;
        }
        &.p2 {
          font-size: 24px;
          color: #999;
        }
        &.p3 {
          font-size: 24px;
        }
      }
    }
    .history_right {
      display: flex;
      justify-content: space-between;
      padding-left: 90px;
      p {
        margin: 0;
        width: 124px;
        height: 92px;
      }
    }
  }
  .history_footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #e1e1e1;
    font-size: 28px;
    padding: 30px;
    height: 172px;
    .history_footer_box {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>